<script lang='ts' setup>
import { reactive, ref, Ref } from 'vue';
import dictionaryTypeServiceApi from '/@/api/org/bean/dictionary-type'

//定义事件
const emit = defineEmits<{
    (e: 'add-success', data: any, res: any): void//保存成功回调
    (e: 'update-success', data: any, res: any): void//更新成功回调
}>()

//定义属性
const props = defineProps({
    /**主键值 */
    codeItemId: String,
})

//model-form ref对象
const JxtechModelFormRef = ref();

//表单数据
const DictionaryTypeFormData: Ref<any> = ref({
    codeItemId: props.codeItemId,
})

//定义必填校验规则
const rules = {
    codeItemId: [{ required: true, message: '请输入数据字典类型编码', trigger: 'blur' }],
    codeItemName: [{ required: true, message: '请输入数据字典类型名称', trigger: 'blur' }],
}

//组件对象
const DictionaryTypeFormState = reactive({
    primaryKey: 'codeItemId',
    getJxtechModelFormExpose: (): ModelFormExpose => {
        return JxtechModelFormRef.value as ModelFormExpose
    },
    /**新增成功 */
    onAddSuccess: (formData: any, res: any) => {
        emit("add-success", formData, res)
    }
})

//对外提供方法
defineExpose({
    save: () => DictionaryTypeFormState.getJxtechModelFormExpose().save()
})
</script>
<template>
    <jxtech-model-form
        ref="JxtechModelFormRef"
        :service-api="dictionaryTypeServiceApi"
        :primary-key="DictionaryTypeFormState.primaryKey"
        :form-data="DictionaryTypeFormData"
        :rules="rules"
        @add-success="DictionaryTypeFormState.onAddSuccess"
    >
        <el-row>
            <el-col :span="21" :offset="1">
                <el-row :gutter="24">
                    <el-col :span="12">
                        <jxtech-model-form-item label="类型编码" prop="codeItemId">
                            <el-input
                                placeholder="请输入数据字典类型编码"
                                v-model="DictionaryTypeFormData.codeItemId"
                            ></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="类型名称" prop="codeItemName">
                            <el-input
                                placeholder="请输入数据字典类型名称"
                                v-model="DictionaryTypeFormData.codeItemName"
                            ></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <jxtech-model-form-item label="级别">
                            <el-radio-group v-model="DictionaryTypeFormData.itemScope">
                                <el-radio label="system">平台</el-radio>
                                <el-radio label="org">租户</el-radio>
                            </el-radio-group>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="是否可编辑">
                            <el-radio-group v-model="DictionaryTypeFormData.updatable">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </jxtech-model-form>
</template>